{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}

<!---头部特色css  开始-->
{block name="titleStyle"}
<style>
  canvas{
		display: block;
		margin:50px auto;
		box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9; /*阴影*/
	}

</style>



{/block}
<!---头部特色css  结束-->


<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<h6 style="color:red;margin-left:400px">点击， 可画黑点</h6>
<canvas id="chess" width="450px" height="450px">
	

</canvas>


<h6>代码</h6>
<pre>
	var chess = document.getElementById('chess');
	/*画图必须 */
	var context = chess.getContext('2d');
	
	context.strokeStyle = "#BFBFBF";
	
	/**画圆   圆心坐标200 300 半径 100 起始弧度 0  终止弧度2*Math.PI (360度)  */
	context.arc(20,30,10,0,2*Math.PI);
	var gradient = context.createRadialGradient(20,30,5,20,28,2);
	/* 0 第一个圆 #0a0a0a 浅灰色*/
	gradient.addColorStop(0,"#0a0a0a");
	/* 第二个圆 #0a0a0a 亮灰色*/
	gradient.addColorStop(1,"#636766");
	/**用gradient 填充style 剩下的部分填为黑色 */
	context.fillStyle = gradient;
	context.fill();


	chess.onclick = function(e){
  /**获得落子的坐标 坐标是小数 */
   var x = e.offsetX;
   var y = e.offsetY;
   context.beginPath();
   context.arc(x,y,10,0,2*Math.PI);
   context.closePath();
   context.fill();
}





</script> 

	 </pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">
	var chess = document.getElementById('chess');
	/*画图必须 */
	var context = chess.getContext('2d');
	
	context.strokeStyle = "#BFBFBF";
	
	/**画圆   圆心坐标200 300 半径 100 起始弧度 0  终止弧度2*Math.PI (360度)  */
	context.arc(20,30,10,0,2*Math.PI);
	var gradient = context.createRadialGradient(20,30,5,20,28,2);
	/* 0 第一个圆 #0a0a0a 浅灰色*/
	gradient.addColorStop(0,"#0a0a0a");
	/* 第二个圆 #0a0a0a 亮灰色*/
	gradient.addColorStop(1,"#636766");
	/**用gradient 填充style 剩下的部分填为黑色 */
	context.fillStyle = gradient;
	context.fill();


	chess.onclick = function(e){
  /**获得落子的坐标 坐标是小数 */
   var x = e.offsetX;
   var y = e.offsetY;
   context.beginPath();
   context.arc(x,y,10,0,2*Math.PI);
   context.closePath();
   context.fill();
}





</script> {/block}